<template>
 
    <ul class="nav-box">
      <!-- <li><span class="iconfont icon-gushi "></span><br>天猫超市</li>
      <li><span class="iconfont icon-remenbankuai"></span><br>天猫国际</li>
      <li><span class="iconfont icon-zanpress"></span><br>零食</li>
      <li><span class="iconfont icon-caifu"></span><br>充值缴费</li>
      <li><span class="iconfont icon-zixuan"></span><br>领津贴</li>
      <li><span class="iconfont icon-yuebao-xiaoqiandai"></span><br>数码电器</li>
      <li><span class="iconfont icon-bingzhuangtu"></span><br>领券</li>
      <li><span class="iconfont icon-a-kayinhangka"></span><br>电影</li>
        <li><span class="iconfont icon-shezhi"></span><br>嗨购</li>
          <li><span class="iconfont icon-bingzhuangtu"></span><br>电影</li> -->
          <li><img src="https://cdn2.iconfinder.com/data/icons/whcompare-blue-green-web-hosting-1/467/free-domain-whois-privacy-256.png"><span>天猫礼物</span></li>
          <li><img src="https://cdn3.iconfinder.com/data/icons/webina-seo-development-and-marketing/128/seo_web_3-68-256.png"><span>天猫超市</span></li>
          <li><img src="https://cdn2.iconfinder.com/data/icons/international-food/64/bibimbub-256.png"><span>零食</span></li>
          <li><img src="https://cdn1.iconfinder.com/data/icons/youtuber/256/video-editor-films-production-256.png"><span>淘票票</span></li>
          <li><img src="https://cdn0.iconfinder.com/data/icons/love-story-filled-outline-1/512/flower_floral_spring_garden_decoration_plant_flowers-256.png"><span>盆栽</span></li>
          <li><img src="https://cdn3.iconfinder.com/data/icons/seo-and-marketing-3/64/SEO_Flat_games_development_joystick-256.png"><span>嗨玩</span></li>
          <li><img src="https://cdn2.iconfinder.com/data/icons/flat-seo-web-ikooni/128/flat_seo2-21-256.png"><span>天猫充值</span></li>
          <li><img src="https://cdn1.iconfinder.com/data/icons/hardware-and-devices/64/Hardware_devices_gadgets-256.png"><span>手机通信</span></li>
          <li><img src="https://cdn2.iconfinder.com/data/icons/shop-and-delivery/44/delivery_truck_1-256.png"><span>快递</span></li>
          <li><img src="https://cdn2.iconfinder.com/data/icons/summer-flat-11/272/summer-vacation-juice-lemon-ice-drinks-glass-2-256.png"><span>美酒</span></li>
         
    </ul>
 
</template>

<script>
export default {
name:"NavBar"
}
</script>

<style scoped>
/* @import url(../assets/iconfonts/iconfont.css); */
.nav-box{
  width: 100%;
  height: 10rem;
  /* background-color: pink; */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top:10px;
  justify-content: space-around;
}
.nav-box li{
  width: 20%;
  height: 5rem;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  font-size: 12px;
}
.nav-box li img{
  width:2.5rem;
  height: 2.5rem;
}

</style>